<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>试题练习管理系统</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<!--<el-button type="primary" @click="openChapter(null)" >添加测验</el-button>-->
				<el-table :data="chapters" border highlight-current-row style="width: 100%">
					<el-table-column prop="accountNick" label="发布人">
					</el-table-column>
					<el-table-column prop="chapterTitle" label="标题">
					</el-table-column>
					<el-table-column prop="chapterRemark" label="备注">
					</el-table-column>
					<!--<el-table-column prop="chapterLimit" label="限时">
						<template slot-scope="scope">
							<span v-if="scope.row.chapterLimit === 0" >不限时</span>
							<span v-if="scope.row.chapterLimit === 1" >
								<span v-if="scope.row.chapterLimitDay > 0" >
									{{scope.row.chapterLimitDay}}天
								</span>
								<span v-if="scope.row.chapterLimitHour > 0" >
									{{scope.row.chapterLimitHour}}小时
								</span>
								<span v-if="scope.row.chapterLimitMin > 0" >
									{{scope.row.chapterLimitMin}}分钟
								</span>
							</span>
						</template>
					</el-table-column>-->
					<el-table-column prop="chapterTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showTopic(scope.row)" type="text" size="small">查看题目</el-button>
					        <!--<el-button @click="openChapter(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delChapter(scope.row.chapterId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>-->
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<!--<el-button type="success" @click="openTopic(null)" >加载题目</el-button>-->
				<el-table :data="topics" border highlight-current-row style="width: 100%">
					<el-table-column prop="topicTitle" label="题目">
					</el-table-column>
					<el-table-column prop="topicType" label="题型" width="100px">
						<template slot-scope="scope">
						<el-tag v-if="scope.row.topicType === 0">单选题</el-tag>
						<el-tag v-if="scope.row.topicType === 1" type="success">多选题</el-tag>
						<el-tag v-if="scope.row.topicType === 2" type="info">填空题</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="选项" width="100px">
						<template slot-scope="scope">
							<el-button @click="openTopicDetail(scope.row)" type="text" size="small">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="topicLevel" label="难度" width="100px">
						<template slot-scope="scope">
						<el-tag v-if="scope.row.topicLevel === 0">初级</el-tag>
						<el-tag v-if="scope.row.topicLevel === 1" type="warning">中级</el-tag>
						<el-tag v-if="scope.row.topicLevel === 2" type="danger">高级</el-tag>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog
		  title="测验设置"
		  :visible.sync="chapterForm.visible"
		  width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
		  <el-form :model="chapterForm" :rules="chapterRules" ref="chapterForm" label-width="100px">
			  <el-form-item label="名称" prop="chapterTitle">
			    <el-input v-model="chapterForm.chapterTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="备注" prop="chapterRemark">
			    <el-input v-model="chapterForm.chapterRemark"></el-input>
			  </el-form-item>
			  <!--<el-form-item label="限时" prop="chapterLimit">
			    <el-select v-model="chapterForm.chapterLimit" filterable placeholder="请选择">
				    <el-option
				      v-for="item in chapterLimits"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="限x天" prop="chapterLimitDay" v-show="chapterForm.chapterLimit*1 === 1"
			  :rules="{ required: chapterForm.chapterLimit*1 === 1, message: '请输入', trigger: 'blur' }"
			   >
			    <el-input v-model="chapterForm.chapterLimitDay"></el-input>
			  </el-form-item>
			  <el-form-item label="限x小时" prop="chapterLimitHour" v-show="chapterForm.chapterLimit*1 === 1"
			  :rules="{ required: chapterForm.chapterLimit*1 === 1, message: '请输入', trigger: 'blur' }"
			   >
			    <el-input v-model="chapterForm.chapterLimitHour"></el-input>
			  </el-form-item>
			  <el-form-item label="限x分钟" prop="chapterLimitMin" v-show="chapterForm.chapterLimit*1 === 1"
			  :rules="{ required: chapterForm.chapterLimit*1 === 1, message: '请输入', trigger: 'blur' }"
			   >
			    <el-input v-model="chapterForm.chapterLimitMin"></el-input>
			  </el-form-item>-->
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeChapter">取 消</el-button>
		    <el-button type="primary" @click="saveChapter">保 存</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="题目设置"
		  :visible.sync="topicForm.visible"
		  width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
		  <el-form :model="topicForm" :rules="topicRules" ref="topicForm" label-width="100px">
			  <el-form-item label="所属测验">
			    {{selectChapter?.chapterTitle}}
			  </el-form-item>
			  <!--<el-form-item label="难度" prop="level">
			    <el-select v-model="topicForm.level" filterable placeholder="请选择">
				    <el-option
				      v-for="item in topicLevels"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>-->
			  <el-form-item label="题目数量" prop="count">
			    <el-input v-model="topicForm.count"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeTopic">取 消</el-button>
		    <el-button type="primary" @click="loadTopic">开始生成</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="题目详情"
		  :visible.sync="topicDetail.visible"
		  width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
		  <el-row>
			  <el-col :span="24">
				  内容：
				  <pre style="width:100%">{{topicDetail.topic?.topicContent}}</pre>
			  </el-col>
			  <el-col :span="24" v-show="topicDetail.topic?.topicType !== 2">
				  <el-table :data="topicDetail.topic?.options" border highlight-current-row style="width: 100%">
					<el-table-column prop="optionText" label="选项">
					</el-table-column>
					<el-table-column prop="optionAnswer" label="答案">
						<template slot-scope="scope">
						<el-tag v-if="scope.row.optionAnswer === 1" type="success">☑️</el-tag>
						</template>
					</el-table-column>
				</el-table>
			  </el-col>
			  <el-col :span="24" v-show="topicDetail.topic?.topicType === 2" >
				  答案：
				  <pre style="width:100%">
					  {{topicDetail.topic?.topicAnswer}}
				  </pre>
			  </el-col>
		  </el-row>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeTopicDetail">关闭</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		chapters: [], 
		topics: [],
		selectChapter: null,
		chapterLimits: chapterLimits,
		topicTypes: topicTypes,
		topicLevels: topicLevels,
		chapterForm:{
			visible: false,
			chapterId: '',
			chapterType: '1',
			chapterTitle: '',
			chapterRemark: '',
			chapterLimit: '',
			chapterLimitDay: '',
			chapterLimitHour: '',
			chapterLimitMin: ''
		},
		chapterQuery:{
			chapterType: '1',
			chapterTitle: '',
			page: '',
			size: '',
		},
		chapterRules: {
          chapterTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          chapterLimit: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          //chapterLimitDay: [
            //{ required: true, message: '请输入', trigger: 'blur' }
          //],
          //chapterLimitHour: [
            //{ required: true, message: '请输入', trigger: 'blur' }
          //],
          //chapterLimitMin: [
            //{ required: true, message: '请输入', trigger: 'blur' }
          //],
        },
		topicForm:{
			visible: false,
			chapterId: '',  
			level: '',  
			count: '',
		},
		topicRules: {
          chapterId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          //level: [
            //{ required: true, message: '请输入', trigger: 'blur' }
          //],
          count: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        },
        topicDetail:{
			visible: false,
			topic: null
		}
	}
	let vueMethods = {
		getChapters() {
			let that = this
			postRequst('/admin/getChapters', that.chapterQuery, true).then(function (resp) {
				that.chapters = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectChapter = resp.rows[0]
					that.topicForm.chapterId = resp.rows[0].chapterId
					that.getTopics()
				}
			})
		},
		getTopics() {
			let that = this
			postRequst('/admin/getTopics', {chapterId: that.selectChapter.chapterId}, true).then(function (resp) {
				that.topics = resp.rows
			})
		},
		showTopic(row){
			let that = this
			that.selectChapter = row
			that.getTopics()
		},
		openChapter(row){
			let that = this
			if(row){
				that.chapterForm.chapterId = row.chapterId
				that.chapterForm.chapterTitle = row.chapterTitle
				that.chapterForm.chapterRemark = row.chapterRemark
				that.chapterForm.chapterLimit = row.chapterLimit + ''
				that.chapterForm.chapterLimitDay = row.chapterLimitDay
				that.chapterForm.chapterLimitHour = row.chapterLimitHour
				that.chapterForm.chapterLimitMin = row.chapterLimitMin
			}else{
				that.chapterForm.chapterId = ''
				that.chapterForm.chapterTitle = ''
				that.chapterForm.chapterRemark = ''
				that.chapterForm.chapterLimit = ''
				that.chapterForm.chapterLimitDay = ''
				that.chapterForm.chapterLimitHour = ''
				that.chapterForm.chapterLimitMin = ''
			}
			that.chapterForm.visible = true
		},
		closeChapter() {
			this.$refs['chapterForm'].resetFields();
			this.chapterForm.visible = false
		},
		openTopic(){
			let that = this
			if(!that.selectChapter){
				that.$message({message: '请先选择测验', type: "warning"});
				return ;
			}
			that.topicForm.chapterId = that.selectChapter.chapterId
			that.topicForm.level = ''
			that.topicForm.count = ''
			that.topicForm.visible = true
		},
		closeTopic() {
			this.$refs['topicForm'].resetFields();
			this.topicForm.visible = false
		},
		openTopicDetail(row){
			this.topicDetail.topic=row
			this.topicDetail.visible = true
		},
		closeTopicDetail(){
			this.topicDetail.visible = false
		},
		saveChapter() {
			let that = this
			this.$refs['chapterForm'].validate((valid) => {
				if (valid) {
					if(that.chapterForm.chapterLimit*1 == 1 && (that.chapterForm.chapterLimitDay*1
					 + that.chapterForm.chapterLimitHour*1
					 + that.chapterForm.chapterLimitMin*1 == 0) ){
						 that.$message({message: '限时至少输入一项', type: "warning"});
						 return false
					 }
					postRequst('/admin/saveChapter', that.chapterForm).then(function (resp) {
						if(resp.status == 0){
							that.getChapters()
							that.chapterForm.visible = false
							that.chapterForm.chapterType = 1
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		loadTopic() {
			let that = this
			this.$refs['topicForm'].validate((valid) => {
				if (valid) {
					this.$confirm('此操作将清空原有的题目?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
				        postRequst('/admin/loadTopic', that.topicForm, true).then(function (resp) {
							if(resp.status == 0){
								that.getTopics()
								that.topicForm.visible = false
								that.$message({message: resp.msg, type: "success"});
							}else{
								that.$message({message: resp.msg, type: "error"});
							}
						})
			        }).catch(() => {});
				}
			});
		},
		delChapter(chapterId) {
			let that = this
			postRequst('/admin/delChapter', {chapterId: chapterId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getChapters()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		/**delTopic(topicId) {
			let that = this
			postRequst('/admin/delTopic', {topicId: topicId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getTopics()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		}**/
	}
	function vueCreated() {
		let that = this
		that.getChapters()
	}

	// 初始化VUE
	/**new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});**/
</script>

</html>